<template>
  <div class="main">
    <div class="top">
        <img src="../assets/top3.jpg" alt="月夕花朝">
        <h3>冰狗后台管理系统</h3>
    </div>
    <div class="bodys">
        <el-row class="tac">
        <el-col :span="12" >
            <el-menu
                :unique-opened="true"
                :collapse-transition="false"
                :collapse="flag"
                class="el-menu-vertical-demo">
                <div class="kong" @click="cl"></div>
                <el-submenu :index="el.id+''" class="lis" v-for="el in lis" :key="el.id">
                    <template slot="title">
                        <i :class="'iconfont icon-'+obj['k'+el.id]"></i>
                        <span>{{ el.authName }}</span>
                    </template>
                    <el-menu-item class="ll" v-for="els in el.children" :key="els.id">
                        <router-link :to=els.path>
                            {{ els.authName }}
                        </router-link>
                    </el-menu-item>
                </el-submenu>
            </el-menu>
        </el-col>
        </el-row>
        <!--  -->
        <div class="ri">
            <router-view></router-view>
        </div>
        </div>
        <!-- 退出登录 -->
        <div>
            <el-button type="danger" class="but" @click="tuichu" plain>退出登录</el-button>
        </div>

  </div>
</template>
<script>
import {listAjax} from '../api/handing'
  export default {
    data(){
        return{
            lis:[],
            obj: {
                k125:"shenfenrenzheng",
                k103:"guanli",
                k101:"maijiadianpu",
                k102:"dingdan",
                k145:"tubiaozhutu"
            }
            ,
            flag:true
        }
    },
    async created(){
        const  res = await listAjax({})
        this.lis = res.data.data;
    }
    ,
    methods:{
        tuichu(){
            window.sessionStorage.removeItem('token');
            this.$router.push('/login');
        },
        shownav1(ind){
            if(this.lis!=""){
                return this.lis[ind].authName
            }
        },
        shownav2(ind,inds){
            if(this.lis!=""){
                return this.lis[ind].children[inds].authName;
            }
        },
        cl(){
            this.flag = !this.flag
            console.log(this.flag);
        }
        
    },
    watch:{

    }
  }
</script>
<style lang='scss' scoped>
.main{
    position: relative;
    min-width: 1200px;
    .top{
        position: absolute;
        right:8%;
        img{
            width: 88px;
        }
        h3{
            text-indent: 1em;
            color: rgb(248, 164, 61);
        }
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .el-menu{
        width: 150px;
    }
    .el-menu-item{
        min-width: 100px;
        width: 150px;
    }
    .el-col-12{
        width: 150px;
    }
    height: 86%;
    position: relative;
    .bodys{
        .tac{
            width: 150px;
            height: 100%;
            min-width: none;
            border: 0;
            min-width: 150px;
            .lis{
                width: 100%;
                // height: 100px;
                a{
                    width: 100%;
                }
            }
        
        }
        display: flex;
        height: 100%;
        .ri{
            width: 10px;
            height: 100%;
            width: 100%;
            min-width: 1000px;
        }
    }
    img{
        width: 190px;
        height: 100px;
    }
    .but{
        position: absolute;
        top: 0;
        right: 0;
    }
}
.ll{
    width: 100%;
    a{
        display: block;
        width: 100%;
        height: 100%;
    }
}
.kong{
    width: 150px;
    height: 20px;
}
.iconfont{
    margin-right: 10px;
}
</style>